<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>新建权限</title>
</head>
<body>
    <div th:fragment="main" id="addRole" class="addRole">
        <style>
            .content {
                position: relative;
                width: auto;
            }
            .addRole {
                margin: 5px;
                padding: 0 15px;
                position: absolute;
                left: 0;
                top: 0;
                right: 0;
                bottom: 0;
                background-color: #fff;
                border: 1px solid #eaeaea;
                border-radius: 5px;
                overflow: auto;
            }
            .addRole .title {
                padding: 18px 0px 10px;
                height: 65px;
                border-bottom: 1px solid #DDD;
                font-size: 14px;
            }
            .addRole .title .title-content {
                margin: 0;
                padding: 5px 10px;
                list-style: none;
                color: #000;
                background-color: #fff;
                border-radius: 0;
                border-left: 2px solid #88B7E0; 
            }
            .addRole .title .title-content li>a {
                color: #000;
            }
            .addRole .title .title-content li>a:hover {
                color: #88B7E0;
            }
            
            .alert-info {
                padding: 8px 12px;
                margin-top: 16px;
                border: 1px solid transparent;
                border-radius: 0px;
                color: #555;
                background-color: #F9F9F9;
                border-color: #DDD;
            }
            .alert-info b {
                color: #337ab7;
            }
            .alert-info span i,.text-title{
                color:#F00;
            }

            .role-add {
                margin-top: 40px;
                font-size: 14px;
            }
            .role-add .form-group {
                margin-bottom: 30px;
            }
            .role-add .footer {
                margin-top: 35px;
            }
            .role-add .save {
                margin-right: 10px;
            }

            .form-control[readonly] {
                background-color: #fff;
            }
            /*返回按钮  */
            .back { 
                display: inline-block;
                float: right;
                position: relative;
                margin-right: 10px; 
                width: 40px; 
                height: 28px; 
                line-height: 28px; 
                text-align: center; 
                color: #fff;
                background: #337ab7; 
                border: 1px solid #337ab7; 
                border-left: none;
                border-radius: 5px;  
            }
            .back:after{ 
                position: absolute; 
                content: " "; 
                border: transparent 13px solid;  
                border-width:  12px 8px; 
                border-right-color: #337ab7; 
                top: 1px; 
                left: -15px; 
                height: 0; 
                width: 0; 
            }
            .back:hover {
                background: #286090; 
            }
            .back:hover:after {
                border-right-color: #286090;
            }
            /*ztree样式  */
            ul.ztree {
                margin-top: 10px;
                border: 1px solid #617775;
                background: #f0f6e4;
                width:220px;
                height:360px;
                overflow-y:scroll;
                overflow-x:auto;
            }
            #systemId{
            	position:relative;
            }
            #menuContent{
            	display:none;
            	position: absolute;
            	z-index:999;
            }
        </style>
        <div class="title">
            <ol class="breadcrumb title-content pull-left">
                <li><a href="#platform-roleGroup-role">权限管理</a></li>
                <li>新建权限</li>
            </ol>
            <a href="#platform-roleGroup-auth" class="back">返回</a>
        </div>
        <div class="alert-info">
            <b>提醒：</b>
            <span class="alert-content">以下所填信息中，带&nbsp;<i>*</i>&nbsp;的为必填项，其它为选填项。</span>
        </div>
         <div class="role-add">
            <form action="" class="form-horizontal col-xs-offset-2" id="add_form">
                <div class="form-group">
                    <label for="auth-name" class="col-sm-3 control-label"><span class="text-title">*&nbsp;</span>权限名称:</label>
                    <div class="col-sm-5">
                        <input name="auth-name" id="auth-name" type="text" class="form-control input-sm">
                    </div>
                </div>
                <div class="form-group">
                    <label for="auth-description" class="col-sm-3 control-label">描述:</label>
                    <div class="col-sm-5 ckeditor">
                        <textarea name="auth-description" id="auth-description" class="form-control" rows="5" placeholder="描述不能超过250个字符"></textarea>
                    </div>
                </div>
                <div class="form-group">
                    <label for="auth-authId" class="col-sm-3 control-label"><span class="text-title">*&nbsp;</span>权限内部标识:</label>
                    <div class="col-sm-5 ckeditor">
                    	<input name="auth-authId" id="auth-authId" type="text" class="form-control input-sm">
                    </div>
                </div>
                <div class="form-group">
                    <label for="auth-authorityContent" class="col-sm-3 control-label"><span class="text-title">*&nbsp;</span>权限内部鉴权字段:</label>
                    <div class="col-sm-5 ckeditor">
                    	<input name="auth-authorityContent" id="auth-authorityContent" type="text" class="form-control input-sm">
                    </div>
                </div>
                <div class="form-group">
                    <label for="auth-moduleId" class="col-sm-3 control-label"><span class="text-title">*&nbsp;</span>权限所属模块:</label>
                    <div class="col-sm-5 ckeditor">
                    	<input name="auth-moduleId" id="auth-moduleId" type="text" class="form-control input-sm">
                    </div>
                </div>
                <div class="form-group">
                    <label for="systemId" class="col-xs-3 control-label"><span class="text-title">*&nbsp;</span>子系统列表:</label>
                    <div class="col-xs-5">
                        <input name="systemId" id="systemId" type="text" class="form-control input-sm" readonly onclick="toggle();">
                        <div id="menuContent" class="col-xs-12 menuContent">
                        	<table id="authTable"></table>
                        </div>
                    </div>
                </div>
                <div class="form-group footer">
                    <div class="col-xs-8">
                        <input type="button" value="清空" class="btn btn-default pull-right cancel" id="cancel">
                        <input type="button" value="保存" class="btn btn-primary pull-right save" id="save">
                    </div>                          
                </div>
            </form>
        </div> 
        <script>
            var data;
            // textarea高度根据内容自适应
            $.fn.extend({
                txtaAutoHeight: function () {
                    return this.each(function () {
                        var $this = $(this);
                        if (!$this.attr('initAttrH')) {
                            $this.attr('initAttrH', $this.outerHeight());
                        }
                        setAutoHeight(this).on('input', function () {
                            setAutoHeight(this);
                        });
                    });
                    function setAutoHeight(elem) {
                        var $obj = $(elem);
                        return $obj.css({ height: $obj.attr('initAttrH'), 'overflow-y': 'hidden' }).height(elem.scrollHeight);
                    }
                }
            });
            $(function () {
                
            });

            $(document).ready(function(){
            	$("#auth-description").txtaAutoHeight();
                $("#authTable").jqGrid({
            		url: contextPath + "/SubSystem/querySubSystemJqg",
            		datatype: "json",
            		colNames:['子系统ID','子系统名称','描述','厂商','类型'],
            		colModel:[
            			{name:'id',index:'id',width: "100px",align: "center"},
            			{name:'name',index:'name',width: "150px"},
            			{name:'description',index:'description',width: "100px"},
            			{name:'vendor',index:'vendor',width: "100px"},
            			{name:'type',index:'type', hidden: true}
            		],
            		sortname:'id',
            		sortorder:'asc',
            		viewrecords: true,
            		multiselect: false,
            		rowNum: 20,
            		rowList:[5,10,20],
            		onSelectRow: function(id){
            			var authData = $("#authTable").jqGrid('getRowData',id);
            			$("#systemId").val(authData.id);/* .attr("data-type",authData.type); */
            		}	
            	});
            });

            function toggle() {
                var menuContent = $("#menuContent");
                if(menuContent.css("display") == 'none'){
                    $("#menuContent").css({left:0 + "px", top:31 + "px"}).slideDown("fast");
                    $("body").bind("mousedown", onBodyDown);
                }
            }
            function hideMenu() {
                $("#menuContent").fadeOut("fast");
                $("body").unbind("mousedown", onBodyDown);
            }
            function onBodyDown(event) {
                if (!(event.target.id == "menuBtn" || event.target.id == "menuContent" || $(event.target).parents("#menuContent").length>0)) {
                    hideMenu();
                }
            }
            // 新建
            $('#save').on('click',function(){
            	if(!parseInt($("#auth-moduleId").val())){
            		toastr.error("权限所属模块必须是正整数！");
            		return;
            	}
                var formData = {
					"description": $("#auth-description").val(),
					"name": $("#auth-name").val(),
					"authId": $("#auth-authId").val(),
					"authorityContent": $("#auth-authorityContent").val(),
					"moduleId": parseInt($("#auth-moduleId").val()),
					"systemId": parseInt($("#systemId").val())
					//"type": parseInt($("#systemId").attr("data-type"))
				}
                if(!formData.name){
                	toastr.error("权限名称:不能为空!");
                	return;
                }
                if(!formData.authId){
                	toastr.error("权限内部标识不能为空!");
                	return;
                }
                if(!formData.authorityContent){
                	toastr.error("权限内部鉴权字段不能为空!");
                	return;
                }
                if(!formData.moduleId){
                	toastr.error("权限所属模块不能为空!");
                	return;
                }
                if(!formData.systemId){
                	toastr.error("子系统列表不能为空!");
                	return;
                }
                $.ajax({
                    url: contextPath + '/authority/createAuthority',
                    type: 'POST',
                    data: JSON.stringify(formData),
                    contentType: "application/json",
                    success: function (data) {
                    	if(data.code == '1'){
                    		toastr.success('新建成功');
                    		location.hash = "platform-roleGroup-auth";
                    	}else{
                    		toastr.error("新建失败！",data.message);
                    		console.log(data);
                    	}
                    },
                    error: function (data) {
                    	toastr.error("新建失败！",data.message);
                    } 
				});
			});

            // 清除
            $('#cancel').on('click',function(){
				$('#add_form')[0].reset();
				$('#role-tree').val('');
			});
        </script>
    </div>
</body>
</html>